<template>
  <view class="container">
    <!-- 头部导航栏 -->
    <!-- <view class="headerBag">
      <image 
        src="/static/icon-Get-into@3.png" 
        class="back" 
        @click="goBack"
      />
      <text class="font18 pagetitle">订单付款成功</text>
    </view> -->

    <!-- 主要内容区域 -->
    <view class="wrapper">
      <view class="reminders font14">
        <view class="success microFamily">
          <image src="/static/wancheng@2x.png" />
          <view id="inforbox">
            <view>支付方式: {{payType}}</view>
            <view>支付金额: ￥{{totalMoney}}</view>
          </view>
        </view>
      </view>
      <view 
        id="returnBTN" 
        class="returnBTN font18" 
        @click="viewOrderDetail"
      >
        查看订单详情
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      payType: '',      // 支付方式
      totalMoney: ''    // 支付金额
    }
  },
  onLoad(options) {
    // 从页面参数获取支付信息
    if (options.type && options.totalMoney) {
      this.payType = options.type;
      this.totalMoney = options.totalMoney;
    } else {
      // 如果没有参数，设置默认值或从全局状态获取
      this.payType = '银行卡支付';
      this.totalMoney = '0.00';
    }
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    
    // 查看订单详情
    viewOrderDetail() {
      uni.redirectTo({
        url: '/pages/order/list?status=3&from=payOk'
      });
    }
  }
}
</script>

<style>
/* 重置样式 */
page {
  background: #eeeeee;
  height: 100%;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 头部样式 */
.headerBag {
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  height: 88rpx;
  background: #ffffff;
  position: relative;
}

.back {
  width: 44rpx;
  height: 44rpx;
}

.pagetitle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* 主内容区域 */
.wrapper {
  flex: 1;
  padding: 30rpx;
}

.reminders {
  background: white;
  width: 100%;
  height: 320rpx;
  text-align: center;
  padding-top: 90rpx;
  border-radius: 10rpx;
}

.reminders image {
  height: 97rpx;
  width: 97rpx;
}

.success {
  width: 554rpx;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#inforbox {
  width: 428rpx;
  text-align: left;
  line-height: 48rpx;
  text-indent: 20rpx;
}

/* 按钮样式 */
.returnBTN {
  background: #ff2e00;
  color: white;
  width: 710rpx;
  height: 90rpx;
  margin: 0 auto;
  border-radius: 10rpx;
  text-align: center;
  line-height: 90rpx;
  margin-top: 35rpx;
}

/* 字体样式 */
.font14 {
  font-size: 28rpx;
}

.font18 {
  font-size: 36rpx;
}

.microFamily {
  /* 可根据实际需求设置字体 */
  /* font-family: 微软雅黑, sans-serif; */
}
</style>
